<template>
  <div class="dashboard-editor-container" >
    <div class="balance_content flex_row">
      <div class="flex_row">
        <el-button type="primary" size="mini" icon="el-icon-back" @click="bk" circle ></el-button>
        <img class="balance_item_img" src="../../image/shou/shou_116.png" alt="">
        <div class="balance_item_text">收付通余额</div>
        <div class="balance_item_text">{{user_info.balance}}元</div>
        <div class="btn_list">
            <el-button type="primary" size="small" round @click="money_visible=true">资金记录</el-button>
          </div>
      </div>
    </div>
    <el-row :gutter="12" class=" row_content align_start" v-if="type==0">
      <el-col :xs="24" :sm="24" :lg="6" class="chart-wrapper">

        <el-form ref="form" :rules="rules" :model="form" label-width="100px">
        <el-form-item label="充值金额:" prop="pay_money">
          <el-input v-model="form.pay_money" placeholder="请输入充值金额" />
        </el-form-item>
          <el-form-item label="充值方式:" prop="type">
            <el-radio-group v-model="form.type" disabled>
              <el-radio-button label="微信"></el-radio-button>
              <el-radio-button label="支付宝"></el-radio-button>
          </el-radio-group>
        </el-form-item>
          <el-form-item>
            <el-button
              type="success"
              icon="el-icon-check"
              @click="onSubmit('form')"
            >充值</el-button>
          </el-form-item>
        </el-form>

      </el-col>
      <el-col :xs="24" :sm="24" :lg="16" class="chart-wrapper">

        <div class="layout-content">
          充值记录
          <control :config="config" />

        <el-table
          :data="tableData"
          stripe
          align="center"
          highlight-current-row
          style="width: 100%; margin-top: 50px;"
        >
          <el-table-column
            align="center"
            prop="id"
            label="编号"
            width="120"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="remark"
            label="备注"
            width="120"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="money"
            label="金额"
            width="150"
          >
          </el-table-column>
          <el-table-column align="center" width="150" prop="pay_time" label="支付时间"/>
          <el-table-column align="center" width="150" prop="create_time" label="创建时间"/>
        </el-table>
      </div>
      <el-pagination
        :current-page="current_page"
        :page-size="per_page"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
  
      </el-col>

    </el-row>
    <el-row :gutter="12" class="row_content align_start" v-if="type==1">
      <el-col :xs="24" :sm="24" :lg="6" class="chart-wrapper">
      <el-form ref="form" :rules="rules" :model="form" label-width="100px">
      <el-form-item label="申请金额:" prop="pay_money">
        <el-input v-model="form.pay_money" placeholder="请输入提现金额" />
        <el-tag >当前可提现:{{money_count}}元</el-tag>
      </el-form-item>
        <el-form-item label="备注:" prop="remark">
          <el-input
          type="textarea"
          :rows="3"
          v-model="form.remark"
          placeholder="请输入备注"
        />
    </el-form-item>
      <el-form-item>
        <el-button
          type="success"
          icon="el-icon-check"

          @click="onSubmitApply('form')"
        >申请提现</el-button>
      </el-form-item>
    </el-form>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="16" class="chart-wrapper">
      <div class="layout-content">
        提现记录
        <control :config="config" />
      <el-table
        :data="tableData"
        stripe
        align="center"
        highlight-current-row
        style="width: 100%; margin-top: 50px;"
      >
        <el-table-column
          align="center"
          prop="id"
          label="编号"
          width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="remark"
          label="备注">
        </el-table-column>

        <el-table-column
          align="center"
          prop="money"
          label="金额"
          width="150"
        />
        <el-table-column
          align="center"
          prop="real_money"
          label="实付金额"
          width="150"
        />
        <el-table-column
          align="center"
          prop="reply_remark"
          label="回复"
          width="150"
        />
        <el-table-column
          align="center"
          prop="status"
          label="状态"
        ><template slot-scope="scope">
          <el-tag v-if="scope.row.status==0">申请中</el-tag>
          <el-tag v-if="scope.row.status==1" type="success" >成功</el-tag>
          <el-tag v-if="scope.row.status==2" type="danger" >拒绝</el-tag>
        </template>
        </el-table-column>
        <el-table-column align="center" width="150" prop="update_time" label="更新时间"/>
        <el-table-column align="center" width="150" prop="create_time" label="申请时间"/>
      </el-table>
    </div>
    <el-pagination
      :current-page="current_page"
      :page-size="per_page"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
      </el-col>
    </el-row>
    <el-dialog title="充值" top="25vh" @close="payPopClose" :visible.sync="pay_code_visible" :width="device=='mobile'?'80%':'30%'" v-if="pay_code_visible">
      <div class="pay_code">
        <div>{{pay_info.msg}}</div>
        <img :src="pay_info.img" alt="" srcset="">
        <el-button type="success" size="mini" @click="payDone">我已完成支付</el-button>
      </div>
    </el-dialog>
    <!-- 资金记录 -->
    <drawer title="资金记录" :isShow="money_visible"  @update:isShow="money_visible=false" width=".5">
      <money-log />
    </drawer>
  </div>
</template>

<script>
import control from "../../components/control/control";
import moneyLog from '../../components/orderlist/moneyLog'

export default {
  components: { control,moneyLog },
  computed: {
    device() {
      return this.$store.state.app.device
    },
  },
  data() {
    return {
      //支付收款信息
      pay_info:{
        img:'',
        msg:'',
      },
      //是否展示支付二维码
      pay_code_visible:false,
      money_visible:false,
      user_info:{},
      form:{
        pay_money:"",
        type:"微信",
        remark:""
      },
      value: "",
      searchWhere: {
        title: "",
      },
      tableData: [],
      total: 0,
      type: 0,
      current_page: 1,
      money_count: 0,
      per_page: 7,
      rules: {
        pay_money: [
          { required: true, message: '请输入充值金额', trigger: 'blur' }
        ]
      },
      config: [
        {
          type: 'date_time',
          placeholder: '请选择日期',
          field: 'date_time',
          val: '',
        },
      ],
    }
  },
  mounted() {
    if (this.$route.query.type) {
      this.type = this.$route.query.type;
    }
    this.onSearch()
  },
  methods: {
    // 返回
    bk() {
      this.$router.back()
    },
    // 查询
    handleSizeChange(val) {
      this.onSearch();
    },
    handleCurrentChange(val) {
      this.current_page = val;
      this.onSearch();
    },
    onSearch(){
      let url="/admin/Extend/pay_log"
      if(this.type>0){
        url="/admin/Extend/extract_log"
      }
      const form={}
      form.page = this.current_page;
      form.map = this.searchWhere;
      this.get(url, form, "POST").then((e) => {
        this.user_info = e.user_info;
        this.tableData = e.list.data;
        this.per_page = e.list.per_page;
        this.total = e.list.total;
        this.current_page = e.list.current_page;
        if(e.money_count){
          this.money_count=e.money_count
        }
      })
    },
    onSubmitApply(formName){
      const form = this.form
      if(form.pay_money<=0){
        this.$msg_ok('error', '请输入金额')
      }
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.get('/admin/Extend/extract', form, 'POST').then(e => {
            this.$msg_ok('success', '保存成功')
            this.form={
              pay_money:0,
              type:"微信",
              remark:""
            }
            this.onSearch()
            //this.$router.back()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    onSubmit(formName){
      const form = this.form
      if(form.pay_money<=0){
        this.$msg_ok('error', '请输入金额')
        return
      }
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.get('/admin/Extend/pay', form, 'POST').then(e => {
            this.pay_info.img = 'data:image/png;base64,'+e.img
            this.pay_info.msg = e.msg
            this.pay_code_visible = true
            // this.$msg_ok('success', '保存成功')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    //支付收款码弹窗关闭
    payPopClose () {
      this.onSearch()
      //this.$store.dispatch("admin/set_user_info");
    },
    //用户确认完成支付
    payDone () {
      this.onSearch()
      this.pay_code_visible=false
      //this.$store.dispatch("admin/set_user_info");
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 16px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin: 16px 16px;
  }

}

@media (max-width:550px) {
  .chart-wrapper {
    margin: 16px 0 !important;
  }

}
</style>

<style>
.flex_row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.align_start {
  align-items: flex-start;
}
.layout-all {
  margin-top: 20px;
  margin-left: 10px;
}
.layout-content {
  margin-top: 20px;
}
/* 我的余额开始 */
.balance_content {
  /* margin-left:15px; */
  height:80px;
  width:100%;
  padding:0px 10px;
  border-radius: 10px;
  background-color: #ffffff;
}
.balance_item_img {
  margin-left:20px;
  width:30px;
  height:30px;
}
.balance_item_text {
  font-size: 16px;
  color:#333333;
  margin-left:10px;
}
.balance_item_btn {
  width:80px;
  height:30px;
  /* line-height: 30px; */
  text-align: center;
  border-radius: 40px;
  align-items: center;
  display: flex;
  justify-content: space-around;
  font-size: 14px;
  margin-right:15px;
}
.withdraw {
  background-color: #9058f9;
  color:#ffffff;
}
.recharge {
  border:2px solid #9058f9;
  color:#9058f9;
}
/* 我的余额结束 */
.row_content {
  padding:20px 5px;
}
/* 充值二维码弹窗开始 */
.pay_code {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pay_code img {
  width:200px;
  height:200px;
}
.pay_code button {
  margin-top:20px;
}
/* 充值二维码弹窗结束 */

.btn_list {
  margin-left:50px;
}
</style>>
